<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个"容器"-->

<div id="test"></div>

<!--引入库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>


<script type="text/babel">



    //1.创建组件
    class Weather extends React.Component {

        constructor(props) {
            console.log("构造器调用");
            super(props);
            //初始化对象
            this.state = {isHot: true};

            //bind  1.生成新的函数  2.改函数里的this
            //自身一个(就是这个changeWeather)   原型上还有一个  点击调用的是自身的changeWeather
            this.changeWeather= this.changeWeather.bind(this);
        }

        //更新次数+1次初始次数
        render() {
            console.log("render");
            console.log(this);
            const {isHot} = this.state;
            return (
                <div>
                    <h1 id='title1'>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
                    <h1 id='title2' style={{color:'red'}}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
                    <h1 id='title3' onClick={demo} style={{color:'blue'}}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
                    <h1 id='title4' onClick={this.changeWeather} style={{color:'green'}}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
                </div>
            );
        }


        //点几次调用几次
        changeWeather() {
            //这里的this是 undefined
            //只有通过实例  调用方法  这个this才是该实例
            console.log(this);
            console.log(this.state.isHot);

            //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
            //类中的方法默认开启了局部的严格模式
            //所以changeWeather()中的this为undefined

            //获取原来的isHot值
            const  isHot = this.state.isHot;
            //!!!!状态不可直接更改，要借助一个内置API进行更改   是一种合并更改，原先其他的属性状态不会丢失
            this.setState({isHot:!isHot});

        }


    }

    //2.渲染虚拟DOM到页面
    ReactDOM.render(<Weather/>, document.getElementById('test'));

/*    const weather = new Weather();
    weather.changeWeather();*/






    const title1 = document.getElementById("title1");
    title1.addEventListener('click',()=>{
        console.log("标题1被点击了");
    });


    const title2 = document.getElementById("title2");
    title2.onclick=function () {
        console.log("标题2被点击了");
    };

    function demo() {
        console.log("标题3被点击了");
    }



</script>

</body>
</html>
